import Taro, { Component } from '@tarojs/taro'
// eslint-disable-next-line no-unused-vars
import { View, Image } from '@tarojs/components'
import { queryHistory, queryFavorite, dateFormat } from '../../utils';
import './index.less'

import { fetchRss } from '../../api'

function setImg(result = []) {
  let reg = /img[\s]+src=['|"]([\w|://\.]+)['|"]/i
  let items = result.map(v => {

    let m = (v.content || '').match(reg)
    v.img = m ? m[1] ? m[1] : require('../../assets/img/title.jpg') : require('../../assets/img/title.jpg');
    return v;
  });
  return items;
}
export default class Index extends Component {
  state = {
    list: [],
    shopPull: false,
    //当前页面
    current: 1,
    url: ''
  }
  componentWillMount() {
    // console.log('ssss', this.$router)
    const { url, source } = this.$router.params
    this.setState({
      url: url
    })
    //历史过来
    if (source == 'history') {
      Taro.setNavigationBarTitle({
        title: '足迹'
      })
      console.log('足迹', queryHistory())
      this.setState({
        list: setImg(queryHistory())
      })
      //收藏过来的
    } else if (source == 'favorite') {
      Taro.setNavigationBarTitle({
        title: '本地收藏'
      })
      this.setState({
        list: setImg(queryFavorite())
      })
    } else {
      fetchRss({
        rssUrl: url
      }).then(res => {
        const { list } = res
        // console.log('res',res)
        debugger
        this.setState({
          list: list
        })
      })
    }

  }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() {

  }

  componentDidHide() { }

  config = {
    navigationBarTitleText: '列表',
    onReachBottomDistance: 50,

    enablePullDownRefresh: true
  }
  onShareAppMessage() {
    return {
      title: 'RSS阅读器',
      desc: '提升阅读效率',
      imageUrl: require('../../assets/img/title.jpg'),
      path: '/pages/index/index'
    }
  }
  onPullDownRefresh() {
    // this.state.shopPull
    this.setState({
      shopPull: false
    })
    // const 
    // this.state.current
    this.setState()
    // console.log('dasdas')
    fetchRss({
      rssUrl: this.state.url,
      current: this.state.current,
    }).then(res => {
      const { list } = res
      Taro.stopPullDownRefresh()
      this.setState({
        list: [...list]
      })
    })
  }
  onReachBottom() {
    let { current, list } = this.state
    if (this.state.shopPull) {
      return
    }
    ++current;
    fetchRss({
      rssUrl: this.state.url,
      current: current,
    }).then(res => {
      // const { list } = res
      list = [...list, ...res.list]
      this.setState({
        list: [...list]
      })
      if (list.length >= res.total) {
        this.setState({
          shopPull: true
        })
      }
    })
  }
  toPreview(item) {
    //
    const { url, source } = this.$router.params
    if (['history', 'favorite'].includes(source)) {
      Taro.setStorageSync('rss_detail', item)
    }
    Taro.navigateTo({
      url: '/pages/detail/index?id=' + (item._id || '') + '&source=' + source
    })
  }
  render() {
    return (
      <View className='index'>

        <View className='cu-card dynamic menu'>
          {
            this.state.list.map((item, index) => {


              return <View
                onClick={() => this.toPreview(item)}
                key={index} className='cu-item shadow'
              >
                <View className='grid flex-sub  col-1'>
                  <View className='bg-img only-img' >
                    <Image class='img' src={item.img || require('../../assets/img/title.jpg')} />
                  </View>
                </View>
                <View className='padding'>
                  <View className='title text-gray text-content text-df'>{item.title}</View>
                  <View className='text-gray text-sm'>{dateFormat(item.pubDate)}</View>
                </View>
              </View>
            })
          }
        </View>
      </View>
    )
  }
}
